<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="layout" content="main" />
    <gui:resources components="['tabView']"/>
    <title>TabView Demo</title>
    <style>
    .myTabStyle a em {
        background: pink;
    }
    </style>
</head>

<body>

    <h1>TabView Demo</h1>

    <gui:tabView id="tabView">
    
        <gui:tab id='neg' label='nested'>
            <gui:tabView id='nestedtabview' activeTabIndex='2'>
                <gui:tab label='n1'>n1</gui:tab>
                <gui:tab label='n2'>n2</gui:tab>
                <gui:tab label='n3'>n3</gui:tab>
            </gui:tabView>
        </gui:tab>

        <!-- totally static -->
        <gui:tab id="t1" label="#1: static tab 1">
            <h3>This is the inside of tab 1</h3>
            <p/>This tab has static content. Isn't it wonderful?
        </gui:tab>

        <!-- totally static -->
        <gui:tab id="t2" class="myTabStyle" label="#2: static tab 2">
            <h3>This is the inside of tab 2</h3>
            <p/>This tab also has static content, and a picture
            <br/>
            <img src="${createLinkTo(dir:'/images', file:'thumbsup.jpg')}" alt="Thumbs up for Grails!!"/>
        </gui:tab>

        <!-- renders a static url-->
        <gui:tab id="t3" label="#3: url loader" dataSrc="http://developer.yahoo.com" active="true"/>

        <!-- relies on a controller to render a template back to it-->
        <gui:tab
    id="t4"
    label="#4: dynamically loaded tab"
    controller="demo"
    action="tabLoader"/>

    </gui:tabView>
    
    <p/>This tabView contains buttons that activate the next tab using <em>Component Accessibility</em>
    
    <div style="padding-left:100px;width:300px">
        <gui:tabView id="myTabView">
            <gui:tab label="tab 0" active="true">
                <h2>TAB at index 0</h2>
                <button id='button0' value='1' type='button'>Next</button>
            </gui:tab>
            <gui:tab label="tab 1">
                <h2>TAB at index 1</h2>
                <button id='button1' value='2' type='button'>Next</button>
            </gui:tab>
            <gui:tab label="tab 2">
                <h2>TAB at index 2</h2>
                <button id='button2' value='3' type='button'>Next</button>
            </gui:tab>
            <gui:tab label="tab 3" class='myTabStyle'>
                <h2>TAB at index 3</h2>
                <button id='button3' value='0' type='button'>Next</button>
            </gui:tab>
        </gui:tabView>
        <script>
        YAHOO.util.Event.onDOMReady(function(){
            var buttons = ['button0','button1','button2','button3'];
            for (i in buttons) {
                YAHOO.util.Event.on(buttons[i], 'click', function(e) {
                    GRAILSUI.myTabView.set('activeIndex', e.target.value);
                });
            };
        });
        </script>
    </div>

</body>

</html>